<script>
import dayjs from 'dayjs'

export default {
  props: {
    format: {
      type: String,
      default: 'YYYY-MM-DD'
    },
    fallback: {
      type: String,
      default: '-'
    },
    isEditing: false
  },
  data() {
    return {

    }
  },
  computed: {
    attrs() {
      const attrs = { ...this.$attrs }
      attrs['type'] = 'date'
      return attrs
    },
    listeners() {
      const listeners = { ...this.$listeners }
      return listeners
    },
    valueFormatted() {
      const d = dayjs(this.$attrs.value).format(this.format)
      return d === 'Invalid Date' ? this.fallback : d
    }
  }
}
</script>
<template>
  <el-date-picker
    v-if="isEditing"
    v-bind="attrs"
    v-on="listeners"
  />

  <span v-else>{{ valueFormatted }}</span>
</template>

<style lang="scss">
</style>
